<template>
  <div class="contentDiv p-8">
    <div class="m-4 p-4 mt-0" w:text="color-[#f00]">{{ userStore.name }}</div>
    <a-button type="primary" @click="onAction">
      <template #icon><SearchOutlined /></template>
      action
    </a-button>
    <div class="bg-gray-500 mt-4 rounded-[50px]">
      fullName: {{ userStore.fullName }}
    </div>
    <div class="bg mt-4 p-4" :style="active">appName: {{ appStore.name }}</div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, watch } from "vue";
import { useUserStore } from "@/store/user";
import { useAppStore } from "@/store/app";
const userStore = useUserStore();
const appStore = useAppStore();
const active = ref({ color: "#f00" });
let a = { color: 0 };
const obj1 = ref(a);
console.log(obj1.value);
const obj = reactive(a);
console.log(obj.color);
const onAction = () => {
  userStore.updateName("李四");
  obj.color++;
  active.value = "100px";
};
console.log(obj);
watch(
  () => obj.color,
  (newVal, oldVal) => {
    console.log(newVal, oldVal);
  },
  { immediate: true }
);

const objCount = reactive({ a: 111 });
objCount.a++;
console.log(objCount);


</script>

<style lang="scss" scoped></style>
